<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: rgb(218, 207, 207);
        }
        
        .big {
            background-color: white;
            height: 600px;
            width: 1200px;
            position: relative;
            margin: 100px;
        }
        
        .Abox {
            background-color: rgb(47, 47, 104);
            width: 430px;
            height: 590px;
            position: absolute;
            right: 150px;
            top: -50px;
        }
        
        .Alittle {
            background-color: rgb(47, 47, 104);
            width: 350px;
            height: 370px;
            margin: 100px auto;
        }
        
        .Bbox {
            width: 350px;
            height: 350px;
            position: relative;
            top: 100px;
            background-color: gray;
            left: 300px;
        }
        
        .Cbox {
            background-color: rgb(226, 189, 195);
            width: 350px;
            height: 250px;
            bottom: -40px;
            left: 330px;
            position: relative;
        }
        
        .Clittle h4 {
            color: violet;
        }
        
        img {
            width: 350px;
            height: 350px;
        }
        
        h4 {
            font-size: 23px;
            color: white;
        }
        
        .Cbox p {
            font-size: 15px;
        }
        
        .btm {
            background-color: #eed0cb;
            margin: auto 20px;
            display: inline-block;
            width: 150px;
            height: 30px;
            text-align: center;
            border: solid #ffffff;
        }
        
        .btn {
            color: rgb(76, 219, 48);
            background-color: #ffffff;
            display: inline-block;
            font-size: 17px;
            width: 150px;
            height: 30px;
            text-align: center;
            margin: 30px 0;
        }
        
        .Clittle {
            width: 300px;
            height: 200px;
            background-color: rgb(226, 189, 195);
            margin: 20px auto;
        }
    </style>
</head>

<body>
    <div class="big box">
        <div class="Abox">
            <div class="Alittle">
                <h4>Philosophy</h4>
                <p>A bad beginning makes a bad ending.</p>
                <p>The longest day has an end.</p>
                <p>A good medicine tastes bitter.</p>
                <p>A bad workman always blames his tools.</p>
                <div class="btn">LEARN MAHUB</div>
            </div>
        </div>

        <div class="Bbox"><img src="1.jpg" alt=""></div>
        <div class="Cbox">
            <div class="Clittle">
                <h4>Amazing</h4>
                <p> The weather suddenly cools,so its time to turn the story.</p>
                <p>Don't deny yourself,you are very kind,very gentle,especially worthwhile.</p>
                <div class="btm"> VIEW POIJNBTFVG</div>
            </div>
        </div>
    </div>

</body>

</html>